<template>
  <div>
    <!-- 占位元素 -->
    <div :style="{ width: '100%', height: '60px' }"></div>
    <div class="tab-bar">
      <van-tabbar v-model="active" :fixed="false" :border="false" active-color="#d62014" inactive-color="#333" @change="change">
        <van-tabbar-item v-for="v in listItem" :key="v.cls">
          <span class="text">{{ v.name }}</span>
          <template slot="icon">
            <div class="icon">
              <img :src="v.src"  alt=""/>
            </div>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <SearchPop ref="searchRef" @close="close" />
    <Cart ref="cartRef" @close="close" />
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
import SearchPop from '@/page/Search/components/SearchPop.vue'
import Cart from '@/page/cart'
export default {
  name: "VTabBar",
  components: {
    SearchPop,
    Cart,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  watch: {
    $route: {
      handler: function (to) {
        if (to.path === '/home') {
          this.active = 0
        } else if (to.path === '/commodity') {
          this.active = 1
        } else if (to.path === '/me') {
          this.active = 4
        } else {
          this.active = -1
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      active: -1,
      listItem: [
        {
          cls: "home",
          name: this.$t("首页"),
          path: "/",
          src: require("@/assets/image/bottom/tab-1.png"),
        },
        {
          cls: "commodity",
          name: this.$t("分类"),
          path: "/commodity",
          src: require("@/assets/image/bottom/tab-2.png"),
        },
        {
          cla: "search",
          name: this.$t("搜索"),
          path: "/cart",
          src: require("@/assets/image/bottom/tab-3.png"),
        },
        {
          cla: "cart",
          name: this.$t("购物车"),
          path: "/cart",
          src: require("@/assets/image/bottom/tab-4.png"),
        },
        {
          cla: "me",
          name: this.$t("心愿清单"),
          path: "/me",
          src: require("@/assets/image/bottom/tab-5.png"),
        },
      ]
    }
  },
  methods: {
    change(active) {
      this.active = active
      if (active === 0) {
        this.$router.replace({ path: "/home" })
      } else if (active === 1) {
        this.$router.replace({ path: "/commodity" })
      } else if (active === 2) {
        this.$refs.searchRef.show()
      } else if (active === 3) {
        this.$refs.cartRef.show()
      } else if (active === 4) {
        this.$router.replace({ path: "/me" })
      }
    },
    close() {
      if (this.$route.path === '/home') {
        this.active = 0
      } else if (this.$route.path === '/commodity') {
        this.active = 1
      } else if (this.$route.path === '/me') {
        this.active = 4
      } else {
        this.active = -1
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tab-bar{
  position: fixed;
  bottom: 0;
  background: #FFFFFF;
  left: 0;
  right: 0;
  z-index: 1099;
  box-shadow: 0 0 9px #0000001f;
  padding: 10px 0 5px;
  //padding-bottom: constant(safe-area-inset-bottom);
  //padding-bottom: env(safe-area-inset-bottom);
  ::v-deep .van-tabbar-item__text{
    text-align: center;
  }
}
.text{
  font-weight: 600;
}
.icon{
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #d62014;
  >img{
    width: 18px;
    height: 18px;
  }
}
</style>
